<template>
	<div class="OptionList">
		<h3>{{optionInfo.title}}</h3>
		<ul>
			<li 
				v-for="(item,index) of optionInfo.optionItems"
				:key="index"
				:class="{on: index==current}"
				@click="handClick(index)"
			>
				{{item}}
			</li>
		</ul>
	</div>
</template>

<script>
	export default{
		name:"OptionList",
		props:["optionInfo"],
		
		data(){
			return{
				current:0,
			}
		},
		
		methods:{
			handClick(i){
				this.current = i
			}
		}
	}
</script>

<style lang="scss" scoped>
	.OptionList{
		margin-top: 45px;
	}
	.OptionList h3{
		font-size: 30px;
		color:#333;
	}
	.OptionList ul{
		display: flex;
		margin-top: 20px;
	}
	.OptionList ul li{
		width:120px;
		height: 45px;
		background: #ccc;
		font-size: 30px;
		color: #999;
		text-align: center;
		line-height: 45px;
		border-radius: 10px;
		margin-right: 20px;
	}
	.OptionList ul .on{
		background: #ff9900;
		color:#fff;
	}
</style>